<template>
    <div class='list-page'>
        <ul>

            <li v-for="item in list" :key="item.id">
                <transition name='ani' :enter-class="item.enter" :enter-active-class="item.enterA"
                    :enter-to-class="item.enterTo" :leave-class="item.leave" :leave-active-class='item.leaveA'
                    :leave-to-class="item.leaveTo" appear>
                    <img :src="item.img" alt="" v-if="item.show" @click="item.show = !item.show" />
                    <button v-if="!item.show" @click="item.show = !item.show">显示</button>
                </transition>
            </li>
        </ul>
    </div>
</template>

<script>
import 'animate.css'
export default {
    name: 'list-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            list: [
                {
                    id: '1',
                    name: 'show1',
                    show: true,
                    enter: '',
                    enterA: 'animate__animated animate__backOutUp',
                    enterTo: 'animate__animated animate__backInLeft',
                    leave: '',
                    leaveA: 'animate__animated animate__backOutLeft',
                    leaveTo: '',
                    img: 'http://image.hnclove.com/zy/img/a1.66b94464.jpg'
                },
                {
                    id: '2',
                    name: 'show2',
                    show: true,
                    enter: 'animate__animated animate__backInLeft',
                    enterA: 'animate__animated animate__backOutUp',
                    enterTo: '',
                    leave: '',
                    leaveA: '',
                    leaveTo: '',
                    img: 'http://image.hnclove.com/zy/img/a2.9ade6406.jpg'
                }, {
                    id: '3',
                    name: 'show3',
                    show: true,
                    enter: 'animate__animated animate__backInLeft',
                    enterA: 'animate__animated animate__backOutUp',
                    enterTo: '',
                    leave: '',
                    leaveA: '',
                    leaveTo: '',
                    img: 'http://image.hnclove.com/zy/img/a3.5e00c410.jpg'
                }, {
                    id: '4',
                    name: 'show4',
                    show: true,
                    enter: 'animate__animated animate__backInLeft',
                    enterA: 'animate__animated animate__backOutUp',
                    enterTo: '',
                    leave: '',
                    leaveA: '',
                    leaveTo: '',
                    img: 'http://image.hnclove.com/zy/img/a4.c9ca01e7.jpg'
                }, {
                    id: '5',
                    name: 'show5',
                    show: true,
                    enter: 'animate__animated animate__backInLeft',
                    enterA: 'animate__animated animate__backOutUp',
                    enterTo: '',
                    leave: '',
                    leaveA: '',
                    leaveTo: '',
                    img: 'http://image.hnclove.com/zy/img/a5.aa7e8e02.jpg'
                }, {
                    id: '6',
                    name: 'show6',
                    show: true,
                    enter: 'animate__animated animate__backInLeft',
                    enterA: 'animate__animated animate__backOutUp',
                    enterTo: '',
                    leave: '',
                    leaveA: '',
                    leaveTo: '',
                    img: 'http://image.hnclove.com/zy/img/a6.f68e25ca.jpg'
                }, {
                    id: '7',
                    name: 'show7',
                    show: false,
                    enter: 'animate__animated animate__backInLeft',
                    enterA: 'animate__animated animate__backOutUp',
                    enterTo: '',
                    leave: '',
                    leaveA: '',
                    leaveTo: '',
                    img: 'http://image.hnclove.com/zy/img/a7.55f9beb8.jpg'
                }, {
                    id: '8',
                    name: 'show8',
                    show: true,
                    enter: 'animate__animated animate__backInLeft',
                    enterA: 'animate__animated animate__backOutUp',
                    enterTo: '',
                    leave: '',
                    leaveA: '',
                    leaveTo: '',
                    img: 'http://image.hnclove.com/zy/img/a8.b79b9889.jpg'
                }, {
                    id: '9',
                    name: 'show9',
                    show: true,
                    enter: 'animate__animated animate__backInLeft',
                    enterA: 'animate__animated animate__backOutUp',
                    enterTo: '',
                    leave: '',
                    leaveA: '',
                    leaveTo: '',
                    img: 'http://image.hnclove.com/zy/img/a9.27f9439a.jpg'
                },
            ]
        }
    }
}
</script>

<style scoped>
.list-page {
    width: 1200px;
    margin: 50px auto;
}

ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow: hidden;
}

li {
    height: 200px;
    width: 350px;
    margin: 10px 0;
    position: relative;
}

li img {
    width: 100%;
}

button {
    height: 40px;
    width: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    font-size: 18px;
    border: none;
    border-radius: 20px;
    text-shadow: 0 0 5px #fff;
    background: radial-gradient(circle, #ead0c3, #e46ba8);
}

/* .show1-enter-active,
.show1-leave-active{
    transition: all 1s;
}
.show1-enter,
.show1-leave-to{
    animate__backInLeft
} */
</style>